<template>
  <div>
    <div><img src="../assets/logo.png" style="display:block;width:100px;height:100px;" /></div>
    <div>
      <span class='loginText'>登录</span>
    </div>
    <div class="login">
      <div>
        <div class='inputContainer'>
          <div style='float:left;margin-top:15px'><span style='margin:auto'>姓名</span></div>
        <el-input class='input' v-model='loginName' placeholder='请输入姓名'>
        </el-input>
        </div>
        <div class='inputContainer'>
           <div style='float:left;margin-top:15px'><span style='margin:auto'>密码</span></div>
        <el-input class='input' v-model='loginPassword' placeholder='请输入密码' type='password'>
        </el-input>
        </div>
        <div class="loginType">
          <span style='float:left' @click='dynamic'>动态验证码登录</span>
           <span style='float:right' @click="forget">忘记密码</span>
          </div>
          <div style='margin-top:10px'><el-button class='loginButton' type="primary" @click='login'>登录</el-button></div>
      </div>
      <!--<md-field>
        <label>姓名</label>
        <md-input v-model="initial"></md-input>
      </md-field>
      <md-field>
        <label>密码</label>
        <md-input v-model="initial" type="password"></md-input>
      </md-field>
      <div>
        <span style="float:right;color:red;">忘记密码</span>
        <span style="float:left;color:red;">动态密码登录</span>
      </div>
      <md-button class="md-dense md-raised md-primary loginButton">登录</md-button>-->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.loginText {
  margin-left: 100px;
  margin-top: 100px;
  display: block;
  font-size: 50px;
  top: 100px;
  font-color: '#000000';
}

.login {
  width: 350px;
  height: 350px;
  margin: auto;
  margin-top: 100px;
}

.loginButton {
  margin: auto;
  display: block;
  width: 300px;
  margin-top: 100px;
}
.input {
  width:300px;
  height: 60px;
  margin-top: 10px;
  float: right;
}
.loginButton {
  width:300px;
  margin-top:30px;
}
.inputContainer::after{
content: '';
display: block;
clear: both;
}
.loginType::after{
content: '';
display: block;
clear: both;
}
</style>

<script>
export default {
  data: function () {
    return {
      textarea: '',
      initial: '',
      loginName: '',
      loginPassword: ''
    }
  },
  methods: {
    login: function () { // 登录
      console.log('login button click')
    },
    forget: function () { // 忘记密码
      console.log('forget')
    },
    dynamic: function () { // 动态验证码
      console.log('dynamic')
    }
  }
}
</script>
